<template>
	<div class="display">
		<q-tab-panel name="layoutPanel">
			<div class="text-h6 q-mb-sm">页面布局</div>
			<div class="rounded-borders overflow-hidden">
				<div class="row">
					<div class="col-3 q-pa-md flex flex-center bg-primary text-white">
						<q-option-group
							v-model="viewOptions.top.TL.model"
							:options="viewOptions.top.TL.option"
							:disable="layoutDisable.top.TL"
							color="white" dense dark inline/>
					</div>
					<div class="col-6 q-pa-md flex flex-center bg-primary text-white">
						<q-option-group
							v-model="viewOptions.top.TC.model"
							:options="viewOptions.top.TC.option"
							:disable="layoutDisable.top.TC"
							color="white" dense dark inline/>
					</div>
					<div class="col-3 q-pa-md flex flex-center bg-primary text-white">
						<q-option-group
							v-model="viewOptions.top.TR.model"
							:options="viewOptions.top.TR.option"
							:disable="layoutDisable.top.TR"
							color="white" dense dark inline/>
					</div>
				</div>
				<div class="row">
					<div class="col-3 q-px-md q-py-xl flex flex-center bg-orange text-grey-9">
						<q-option-group
							v-model="viewOptions.middle.ML.model"
							:options="viewOptions.middle.ML.option"
							:disable="layoutDisable.middle.ML"
							color="white" dense dark inline/>
					</div>
					<div class="col-6 q-px-md q-py-xl flex flex-center">Page</div>
					<div class="col-3 q-px-md q-py-xl flex flex-center bg-orange text-grey-9">
						<q-option-group
							v-model="viewOptions.middle.MR.model"
							:options="viewOptions.middle.MR.option"
							:disable="layoutDisable.middle.MR"
							color="white" dense dark inline/>
					</div>
				</div>
				<div class="row">
					<div class="col-3 q-pa-md flex flex-center bg-primary text-white">
						<q-option-group
							v-model="viewOptions.bottom.BL.model"
							:options="viewOptions.bottom.BL.option"
							:disable="layoutDisable.bottom.BL"
							color="white" dense dark inline/>
					</div>
					<div class="col-6 q-pa-md flex flex-center bg-primary text-white">
						<q-option-group
							v-model="viewOptions.bottom.BC.model"
							:options="viewOptions.bottom.BC.option"
							:disable="layoutDisable.bottom.BC"
							color="white" dense dark inline/>
					</div>
					<div class="col-3 q-pa-md flex flex-center bg-primary text-white">
						<q-option-group
							v-model="viewOptions.bottom.BR.model"
							:options="viewOptions.bottom.BR.option"
							:disable="layoutDisable.bottom.BR"
							color="white" dense dark inline/>
					</div>
				</div>
			</div>
		</q-tab-panel>
		<q-tab-panel name="themePanel">
			<div class="text-h6 q-mb-sm">主题配色</div>
			<div class="row q-gutter-md">
				<div class="col" v-for="(theme, index) in displayState.theme" :key="index">
					<q-btn :color="index" class="full-width" unelevated>
						<div class="text-left">
							<div class="gt-xs">{{index}}<br>{{theme}}</div>
							<div class="xs">red</div>
						</div>
						<q-popup-proxy>
							<div>
								<q-color v-model="displayState.theme[index]" class="my-picker"/>
							</div>
						</q-popup-proxy>
					</q-btn>
				</div>
			</div>
		</q-tab-panel>
		<q-tab-panel name="displayPanel">
			<div class="text-h6 q-mb-sm">模块设置</div>
			<q-list bordered>
				<q-expansion-item
					default-opened
					header-class="text-primary"
					group="displayPanel"
					icon="fas fa-arrow-circle-up"
					label="头部">
					<q-item tag="label">
						<q-item-section>
							<q-item-label>QHeader</q-item-label>
							<q-item-label caption>I want a QHeader</q-item-label>
						</q-item-section>
						<q-item-section side top>
							<q-toggle color="primary" v-model="displayState.header.model.value"/>
						</q-item-section>
					</q-item>
					<q-item tag="label">
						<q-item-section>
							<q-item-label>Reveal</q-item-label>
							<q-item-label caption>向下滑动多少隐藏顶部</q-item-label>
						</q-item-section>
						<q-item-section side top>
							<q-toggle color="primary" v-model="displayState.header.behavior.reveal"/>
						</q-item-section>
					</q-item>
					<q-item>
						<q-item-section>
							<q-item-label>Separator</q-item-label>
							<q-item-label caption>Separator type</q-item-label>
						</q-item-section>
						<q-item-section side top>
							<q-select v-model="headerSeparator" :options="separatorOption" dense borderless/>
						</q-item-section>
					</q-item>
				</q-expansion-item>

				<q-separator/>

				<q-expansion-item
					header-class="text-teal"
					group="displayPanel"
					icon="fas fa-arrow-circle-down"
					label="底部">
					<q-item tag="label">
						<q-item-section>
							<q-item-label>显示</q-item-label>
							<q-item-label caption>I want a QFooter</q-item-label>
						</q-item-section>
						<q-item-section side top>
							<q-toggle color="primary" v-model="displayState.footer.model.value"/>
						</q-item-section>
					</q-item>
					<q-item tag="label">
						<q-item-section>
							<q-item-label>Reveal</q-item-label>
							<q-item-label caption>Footer Reveal</q-item-label>
						</q-item-section>
						<q-item-section side top>
							<q-toggle color="primary" v-model="displayState.footer.behavior.reveal"/>
						</q-item-section>
					</q-item>
					<q-item>
						<q-item-section>
							<q-item-label>Separator</q-item-label>
							<q-item-label caption>Separator type</q-item-label>
						</q-item-section>
						<q-item-section side top>
							<q-select v-model="footerSeparator" :options="separatorOption" dense borderless/>
						</q-item-section>
					</q-item>
				</q-expansion-item>

				<q-separator/>

				<q-expansion-item
					group="displayPanel"
					icon="fas fa-arrow-circle-left"
					header-class="text-info"
					label="左侧栏">
					<q-item tag="label">
						<q-item-section>
							<q-item-label>显示</q-item-label>
							<q-item-label caption>I want a QFooter</q-item-label>
						</q-item-section>
						<q-item-section side top>
							<q-toggle color="primary" v-model="displayState.leftSide.model.value"/>
						</q-item-section>
					</q-item>
					<q-item>
						<q-item-section>
							<q-item-label>Separator</q-item-label>
							<q-item-label caption>Separator type</q-item-label>
						</q-item-section>
						<q-item-section side top>
							<q-select v-model="leftSideSeparator" :options="separatorOption" dense borderless/>
						</q-item-section>
					</q-item>
					<q-item>
						<q-item-section>
							<q-item-label>菜单显示</q-item-label>
							<q-item-label caption>Menu show</q-item-label>
						</q-item-section>
						<q-item-section side top>
							<div class="q-gutter-xs">
								<q-radio v-model="displayState.leftSide.behavior.mini" :val="false" label="默认展开" />
								<q-radio v-model="displayState.leftSide.behavior.mini" :val="true" label="默认收起" />
							</div>
						</q-item-section>
					</q-item>
					<q-item>
						<q-item-section>
							<q-item-label>菜单主题</q-item-label>
							<q-item-label caption>Menu theme</q-item-label>
						</q-item-section>
						<q-item-section side top>
							<q-option-group
								v-model="leftSideTheme"
								:options="[
									{label:'深色',value:'dark'},
									{label:'浅色',value:'light'},
								]"
								inline
								color="primary"
							/>
						</q-item-section>
					</q-item>
				</q-expansion-item>

				<q-separator/>

				<q-expansion-item
					group="displayPanel"
					icon="fas fa-arrow-circle-right"
					label="右侧栏"
					header-class="text-positive"
				>
					<q-item tag="label">
						<q-item-section>
							<q-item-label>显示</q-item-label>
							<q-item-label caption>I want a QFooter</q-item-label>
						</q-item-section>
						<q-item-section side top>
							<q-toggle color="primary" v-model="displayState.rightSide.model.value"/>
						</q-item-section>
					</q-item>
					<q-item>
						<q-item-section>
							<q-item-label>Separator</q-item-label>
							<q-item-label caption>Separator type</q-item-label>
						</q-item-section>
						<q-item-section side top>
							<q-select v-model="rightSideSeparator" :options="separatorOption" dense borderless/>
						</q-item-section>
					</q-item>
				</q-expansion-item>
			</q-list>
		</q-tab-panel>
	</div>
</template>
<script>
	export default {
		name: 'Display',
		data() {
			return {
				viewOptions: {},
				displayState: {},
				separatorOption: [
					{
						label: 'None',
						value: 'none'
					},
					{
						label: 'Bordered',
						value: 'bordered'
					},
					{
						label: 'Elevated',
						value: 'elevated'
					},
				]
			};
		},
		methods: {
			getSeparator(name) {
				for (let key in this.separatorOption) {
					if (this.separatorOption.hasOwnProperty(key)) {
						if (this.displayState[name].style[this.separatorOption[key].value]) {
							return this.separatorOption[key];
						}
					}
				}
				return this.separatorOption[0];
			}
		},
		created() {
			this.viewOptions = this.$store.getters['Display/layoutViewGetter'];
			let displayState = JSON.stringify(this.$store.state.Display);
			this.displayState = JSON.parse(displayState);
		},
		computed: {
			layoutDisable() {
				let header = this.displayState.header.model.value;
				let footer = this.displayState.footer.model.value;
				let leftSide = this.displayState.leftSide.model.value;
				let rightSide = this.displayState.rightSide.model.value;
				return {
					top: {
						TL: !(header && leftSide),
						TC: false,
						TR: !(header && rightSide),
					},
					middle: {
						ML: !leftSide,
						MC: false,
						MR: !rightSide,
					},
					bottom: {
						BL: !(footer && leftSide),
						BC: false,
						BR: !(footer && rightSide),
					},
				};
			},
			headerSeparator: {
				get() {
					return this.getSeparator('header');
				},
				set(val) {
					this.displayState.header.style.elevated = false;
					this.displayState.header.style.bordered = false;
					this.displayState.header.style[val.value] = true;
				}
			},
			footerSeparator: {
				get() {
					return this.getSeparator('footer');
				},
				set(val) {
					this.displayState.footer.style.elevated = false;
					this.displayState.footer.style.bordered = false;
					this.displayState.footer.style[val.value] = true;
				}
			},
			leftSideSeparator: {
				get() {
					return this.getSeparator('leftSide');
				},
				set(val) {
					this.displayState.leftSide.style.elevated = false;
					this.displayState.leftSide.style.bordered = false;
					this.displayState.leftSide.style[val.value] = true;
				}
			},
			rightSideSeparator: {
				get() {
					return this.getSeparator('rightSide');
				},
				set(val) {
					this.displayState.rightSide.style.elevated = false;
					this.displayState.rightSide.style.bordered = false;
					this.displayState.rightSide.style[val.value] = true;
				}
			},
			leftSideTheme:{
				get(){
					let contentClass = this.displayState.leftSide.style.contentClass;
					if(!contentClass || contentClass.indexOf('bg-white') !== -1){
						return 'light';
					}
					return 'dark';
				},
				set(val){
					let bg = 'bg-white';
					if(val === 'dark'){
						bg = 'bg-blue-grey-10'
					}
					this.displayState.leftSide.style.listDark = val === 'dark';
					this.displayState.leftSide.style.contentClass = this.displayState.leftSide.style.contentClass.replace(/bg-[^\s]*/,bg);
				}
			}
		},
		watch: {
			viewOptions: {
				handler(options) {
					this.$store.commit('Display/updateLayoutViewOptions', options);
				},
				deep: true
			},
			displayState: {
				handler(option) {
					let optionStr = JSON.stringify(option);
					this.$store.commit('Display/updateState', JSON.parse(optionStr));
				},
				deep: true
			}
		}
	};
</script>
